<template>
  <div class="nav">
    <div class="nav-header">
      <router-link
        v-for="(item,idx) in navList"
        :key="idx"
        :to="item.path"
      >{{item.name}}</router-link>
    </div>
    <div class="view">
      <router-view />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({
  name: 'demo-nav'
})
export default class extends Vue {
  private navList: Array<any> = [
    { path: '/demo-form', name: 'form' },
    { path: '/demo-table', name: 'table' }
  ]
}
</script>

<style lang="scss" scoped>
.nav {
  height: 100%;
  width: 100%;
  overflow: hidden;
  > .nav-header {
    height: 50px;
    > a {
      padding-left: 10px;
      color: $primary;
      font-size: 16px;
      line-height: 50px;
    }
  }
  > .view {
    height: calc(100% - 50px);
    padding: 20px;
    overflow: hidden;
    overflow-y: auto;
  }
}
</style>
